<template>
	<view class="page">
		<view class="container" ref="container">
			<ChatList :chatList="chatList"></ChatList>
		</view>
		<view class="footer">
			<view class="center">
				<textarea v-model="message" auto-height placeholder="请输入" @input="hasMsg = !!message" />
			</view>
			<view :class="{'btn right': true, 'hasMsg': hasMsg}" @click="send">发送</view>
		</view>
	</view>
</template>

<script>
	import ChatList from '../../../components/ChatList/ChatList.vue'
	import {
		sendMsg
	} from '../../../utils/index.js'
	export default {
		components: {
			ChatList,
		},
		data() {
			return {
				hasMsg: false,
				message: null,
				userInfo: {
					nickName: "程序员小白",
					icon: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598346983611&di=8f3d761add3501ba20339d00de7daaa9&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F57%2F28%2F01300000921826141405283668131.jpg",
				},
				chatList: [],
				lost_id: ''
			}
		},
		watch: {
			"chatList.length": function() {
				this.setHeight();
			}
		},
		onLoad(options) {
			this.chatList = this.$store.state.chatList[options.id] || []
			console.log(this.chatList)
			this.lost_id = options.id
			uni.setNavigationBarTitle({
				title: options.nickName || '聊天页面'
			})
		},
		mounted() {
			this.setHeight()
		},
		methods: {
			send() {
				if (!this.hasMsg) return;
				this.chatList.push({
					nickName: this.$store.state.userInfo.userName,
					icon: this.$store.state.userInfo.url,
					message: this.message,
					userId: this.$store.state.userInfo.user_id,
				})
				console.log(this.$store.state.userInfo)
				this.sendMessage(this.$store.state.userInfo.role == '家属' ? 3 : 1)
				this.message = null;
				this.hasMsg = false;
			},
			
			sendMessage(type=1) {
				sendMsg({
					clientId: this.lost_id,
					userId: this.$store.state.userInfo.user_id,
					msg: this.message
				}, type)
			},

			setHeight() {
				this.$refs['container'].$el.scrollIntoView(false)
				this.$nextTick(() => {
					this.$refs['container'].$el.scrollIntoView(false)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: $uni-bg-page;
		// padding-bottom: 20px;

		.container {
			width: 100%;
			padding-bottom: 55px;
			background-color: $uni-bg-page;
			flex: 1;
			position: absolute;
			top: 0;
			margin-bottom: 40px;
		}

		.footer {
			width: 100%;
			display: flex;
			align-items: center;
			min-height: 50px;
			position: fixed;
			bottom: 0px;
			background-color: #f9f9f9;

			.btn {
				width: 50px;
				padding: 0px 6px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				margin: 0 5px;
			}

			.center {
				width: calc(100vw - 84px);
				min-height: 37.5px;
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				padding: 0 6px;
			}

			.right {
				color: #333333;
				border-radius: 3px;
				background-color: #CCCCCC;
			}

			.hasMsg {
				color: #FFFFFF;
				background-color: $uni-bg-color-inverse;
			}
		}
	}
</style>
